<template>
	<view class="border-top">
		<view class="flex align-center border-bottom justify-between" style="height: 100rpx;">
			<view class="flex flex-column align-center position-relative" style="width: 350rpx;height: 100rpx;" @click="onAnswer">
				<view class="flex align-center" style="height: 100rpx;">已解答</view>
				<view class="btm-border position-absolute bottom-0" :class="{ active: index == 1 }"></view>
			</view>
			<view class="color999">|</view>
			<view class="flex flex-column align-center position-relative" style="width: 350rpx;height: 100rpx;" @click="offAnswer">
				<view class="flex align-center" style="height: 100rpx;">未解答</view>
				<view class="btm-border position-absolute bottom-0" :class="{ active: index != 1 }"></view>
			</view>
		</view>
		<view class="flex-column py-3 px-25" v-show="index == 1"><answer-item @itemClick="itemClick(arguments)" :list="onList"></answer-item></view>
		<view class="flex-column py-3 px-25" v-show="index != 1"><offanswer-item @itemClick="itemClick(arguments)" :list="offList"></offanswer-item></view>
		<view class="fixed-bottom" style="width: 127rpx;height: 127rpx;left:600rpx;bottom: 60rpx;">
			<image src="../../../static/img/img_tw.png" style="width: 127rpx;height: 127rpx;" @click="makeAnswer" mode=""></image>
		</view>
	</view>
</template>

<script>
import answerItem from '../../../components/common/answer-item.vue';
import offanswerItem from '../../../components/common/offanswer-item.vue';
export default {
	components: { answerItem, offanswerItem },
	data() {
		return {
			index: 1,
			onList: [],
			offList: []
		};
	},
	onShow() {
		this.getoffData();
		this.getonData();
	},
	methods: {
		onAnswer() {
			this.index = 1;
		},
		offAnswer() {
			this.index = 0;
		},
		makeAnswer() {
			uni.navigateTo({
				url: 'makeanswer/makeanswer'
			});
		},
		itemClick(data) {
			console.log(data)
			uni.navigateTo({
				url: 'answerDetail/answerDetail?id='+data[0]+'&longToId='+data[1]
			});
		},
		getonData() {
			let _this = this;
			let opts = {
				url: 'Topic/TopicList.shtml'
			};
			let param = {
				token: uni.getStorageSync('userInfo').token,
				isRe: 0,
				type: 0
			};
			_this.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						_this.onList = res.data.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				error => {
					console.log(error);
				}
			);
		},
		getoffData() {
			let _this = this;
			let opts = {
				url: 'Topic/TopicList.shtml'
			};
			let param = {
				token: uni.getStorageSync('userInfo').token,
				isRe: 1,
				type: 0
			};
			_this.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						_this.offList = res.data.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				error => {
					console.log(error);
				}
			);
		}
	}
};
</script>

<style>
.btm-border {
	width: 110rpx;
	height: 10rpx;
	background: rgba(18, 146, 255, 0);
	border-radius: 5px;
}
.btm-border.active {
	background: rgba(18, 146, 255, 1);
}
</style>
